<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>NetWorx</title>
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		var link = $('ul li a'); 
		link.click(function() {
			var pageLink = $(this).attr('href');
			
			$('div.placeholder').load(pageLink);
			return false;
		});
	});
</script>
<style type="text/css">
.profile {
display: inline-block;
padding: 18px;
-moz-border-radius: 10px;
border: 3px solid gray;
}
.profile:hover {
	text-decoration: none;
}
body {
	background-color: #AAAAAA;
}

ul {
	list-style-type: none;
}

a.ViewNotification {
	text-decoration: none;
	display: block;
	height: 45px;
	width: 196px;
	background: url("View Notif.Crno.png") no-repeat;
}

a.ViewNotification:HOVER,a.ViewNotification:ACTIVE {
	background: url("View Notif Belo.png") no-repeat;
}

a.ViewFriendReq {
	text-decoration: none;
	display: block;
	height: 45px;
	width: 196px;
	background: url("View Friend Req Crno.png") no-repeat;
}

a.ViewFriendReq:HOVER,a.ViewFriendReq:ACTIVE {
	background: url("View Friend Req Belo.png") no-repeat;
}

a.EditPersonalInf {
	text-decoration: none;
	display: block;
	height: 45px;
	width: 196px;
	background: url("edit personal information crno.png") no-repeat;
}

a.EditPersonalInf:HOVER,a.EditPersonalInf:ACTIVE {
	background: url("edit personal info belo.png") no-repeat;
}

a.EditPassword {
	text-decoration: none;
	display: block;
	height: 45px;
	width: 196px;
	background: url("edit password crno.png") no-repeat;
}

a.EditPassword:HOVER,a.EditPassword:ACTIVE {
	background: url("edit password belo.png") no-repeat;
}

.mid {
	background-image: url('1.png');
	background-repeat: repeat-x;
	height: 800px;
	width: 70%;
}

.container {
	position: relative;
}

.wrapper {
	width: 860px;
	margin: 0 auto;
}

.colone-left {
	float: left;
	width: 370px;
	margin: 0 20px 0 0;
}

.colone-right {
	float: right;
	width: 470px;
	margin: 0 0 0 0;
}

a {
	font-weight: bold;
	color: #fff;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
	color: #000;
}

div.slider {
	width: 250px;
	height: 280px;
	position: relative;
}

div.slider ul {
	margin: 0;
	padding: 0;
}

div.slider ul li img {
	width: 100px;
	height: 150px;
}

div.slider ul li {
	width: 250px;
	list-style: none;
}

.prevBtn {
	position: absolute;
	bottom: 10px;
	left: 10px;
}

.nextBtn {
	position: absolute;
	bottom: 10px;
	right: 10px;
}

h1 {
	font-size: 30px;
	color: white;
}
</style>
</head>
<body>

	<map name="links">
		<area shape="rect" alt="" coords="14, 0, 260, 50"
			href="ViewPersonsFriendsLoggedUserServlet">
		<area shape="rect" alt="" coords="270, 0, 526, 50"
			href="RegistredUserHomeServlet">
		<area shape="rect" alt="" coords="536, 0, 780, 50" href="ViewWall.jsp">
	</map>

	<div align="center">
		<div class="mid">
			<div class="container">
				<div class="wrapper">
					<div class="header" align="center">
						<img alt="click here to navigate" src="Header.png" usemap="#links">
					</div>
					<div class="header" align="right">
						<a href="LogoutServlet" style="color: white;">Logout</a>
					</div>
					<div class="colone-right">

					</div>
					<div class="colone-left" style="height: 383px; width: 265px;">
					
						<div style="float:left">
							<!-- Slika Ovde -->
							<a class="profile" href="ViewProfilePictureInFullSizeServlet?personID=${logovaniUser.id}" target="_blank">
			    				<img align="middle" src="/images/networx/profile/thumbnails/${logovaniUser.picture}">
			    			</a>
							<p style="color: white; text-align:left;">
								${logovaniUser.firstName} is viewing selected posts
							</p>

							<ul style="display: block; float: left;">
								<li>
									<a class="ViewNotification" href="ViewNottificationsLoggedUserServlet">&nbsp;</a></li>
								<li>
									<a class="ViewFriendReq" href="ViewFriendRequestsLoggedUserServlet">&nbsp;</a>
								</li>
								<li>
									<a class="EditPersonalInf" href="EditPersonalInformation.jsp">&nbsp;</a></li>
								<li>
									<a class="EditPassword" href="EditPassword.jsp">&nbsp;</a>
								</li>
							</ul>
						</div>
						
						<div style="float: left">
							<div class="placeholder"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
